<!-- 首页九宫格 -->
<template>
  <div class="container">
    <div style="position: fixed; width: 100%; top: 0; background: #fff">
      <!-- <van-nav-bar
        title="报表"
        left-arrow
        left-text="返回"
        right-text="下载报表"
        @click-left="onClickLeft"
        @click-right="excelDownloadChange"
      /> -->
      <!-- 引入公共头部组件 -->
      <HeaderMenu
        :click="click"
        title="报表文件"
        leftText="返回"
        @rightEvent="excelDownloadChange"
      />
    </div>

    <!-- 报表文件目录 -->
    <div style="" class="excelBox">
      <TreeFolder
        :iconName="iconNameChildren"
        :isShow="isShowChildren"
        :tree-data="treeData"
        :current="curNameKey"
        :typeTital="typeTital"
        @tree-node-click="nodeClick"
        @titleNodeClickChange="titleNodeClickChange"
      />
    </div>

    <!-- 报表下载列表数据 -->
    <div class="excel" style="width: 100%; padding-bottom: 50px">
      <!--   -->
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoading"
      >
        <div
          class="excelItem"
          v-for="item in excelListData"
          :key="item.FileName"
        >
          <div class="excelTitle" style="font-size: 15px">
            <span>文件名称:</span>
            <span> {{ item.FileName }}</span>
          </div>
          <div class="excelListItem">
            <span>文件类型:</span>
            <span> {{ item.FileType }}</span>
          </div>
          <div class="excelListItem">
            <span>文件大小:</span>
            <span>{{ item.FileSize }}</span>
          </div>
          <div class="excelListItem">
            <span>创建时间:</span>
            <span>{{ item.FileCreateTime }}</span>
          </div>
          <div class="excelListItem">
            <span>最后修改时间:</span>
            <span>{{ item.FileLastWriteTime }}</span>
          </div>
          <div class="excelListItem button">
            <!-- <van-button size="mini" style="margin-top: 12px;" type="primary"
              >下载</van-button
            > -->
            <button class="submitDownButton" @click="submitDownButton(item)">
              下载
            </button>
          </div>
        </div>
        <van-divider />
      </van-list>
    </div>

    <div id="downloadIframe"></div>
  </div>
</template>

<script>
const treeData = [
  { id: 1, name: "一级1" },
  {
    id: 2,
    name: "一级2",
    children: [
      { id: 3, name: "二级2-1" },
      { id: 4, name: "二级2-2" },
    ],
  },
  {
    id: 5,
    name: "一级3",
    children: [
      {
        id: 6,
        name: "二级3-1",
        children: [
          { id: 7, name: "三级3-1-1" },
          { id: 8, name: "三级3-1-2" },
        ],
      },
      { id: 9, name: "二级3-2" },
      { id: 10, name: "二级3-3" },
    ],
  },
];
import {
  Icon,
  Grid,
  GridItem,
  Divider,
  Toast,
  Collapse,
  CollapseItem,
} from "vant";
import { mapState } from "vuex";
// 引入公共头部组件
import HeaderMenu from "../../components/VolHeaderMenu.vue";
import TreeFolder from "./treeFolder.vue";
export default {
  components: {
    "van-icon": Icon,
    "van-grid": Grid,
    "van-grid-item": GridItem,
    "van-divider": Divider,
    "van-collapse": Collapse,
    "van-collapse-item": Divider,
    HeaderMenu,
    TreeFolder,
  },
  data() {
    return {
      click:"返回",
      typeTital: 2,
      curNameKey: "/ReportFile",
      // 是否显示子组件的下级目录
      isShowChildren: false,
      //  显示子组件里的向上或者向下箭头
      iconNameChildren: "arrow-up",
      // 报表文件递归组件数据
      treeData: treeData,
      MenuData: [], // 菜单栏的数据（树形结构的数据）
      // 是否列表加载
      loading: false,
      // 是否加载完成
      finished: true,

      // 是否弹窗
      showPopup: false,
      // 报表下载列表数据
      excelListData: [],
      // 每一个用户下的报表文件数据
      fileDirectoryInfo: [],
      url: "",
    };
  },
  activated() {
    this.treeData = []
    let Permissions = JSON.parse(localStorage.getItem("Permissions"));
    this.Permissions = Permissions;
    // 获取报表下载目录数据
    if (Permissions.findIndex((item) => item == "User.AllReportFile") !== -1) {
      this.getExcelListData();
    }
    //     获取每一个用户下报表文件信息
    this.getFileDirectoryInfo();
    this.excelListData = [];
    // 列表加载
    this.loading = true;
    // 数据没有加载完成
    this.finished = false;
  },
  created(){
      // 报表目录重置
    this.curNameKey = '/ReportFile'
   
  }, 
  mounted (){
    
  },
  watch:{
    $route:{
      handler(val,oldval){
        // console.log('老路由信息',val, this.curNameKey);//新路由信息
        // console.log('新路由信息',oldval,  this.curNameKey);//老路由信息
        if(val.path ==="/excel"){
          // 报表目录重置
          this.curNameKey = '/ReportFile'
        }
      },
      // 深度观察监听
      deep: true
    }
  },
  computed: {
    ...mapState(["system"]),
  },
  methods: {
    nClick(item) {
      alert("是否点击了", item);
      // Toast.success('成功')
    },

    openForm(item) {
      this.$emit("editfn", item);
    },
    /**
     * 点击复选框操作
     * @param {*} id 父级item的id
     * @param {*} pid 子集的pid
     */
    clickBox(id, pid) {
      if (id) {
        // this.activeNames.push(id)
        // this.activeChildrenNames.push(id)
      }
      this.$emit("changebox", id, pid);
    },
    // 返回到上一页
    onClickLeft() {
      this.$router.back();
    },
    // 下载报表点击事件
    excelDownloadChange() {
      // this.$refs.downLoadExcel.showPopup = true;
      this.showPopup = true;
    },

    //   报表列表点击下载
    submitDownButton(url) {
      var that = this;
      this.$toast.loading({
        mask: true,
        message: "下载中...",
      });
      setTimeout(function () {
        that.Toast.clear();
      }, 100);
      // 点击按钮下载文件
      window.open(url.FileDownLoadUrl, "_self");
    },

    nodeClick(val) {
      this.curNameKey = val.key;
      this.$set(val, "curNameKey", this.curNameKey);
      // 调用子组件的获取数据方法重新加载数据
      this.titleNodeClickChange();
    },
    // 子组件的报表目录标题点击事件
    titleNodeClickChange(item) {
      // this.isShowChildren = !this.isShowChildren;
      // if (this.isShowChildren) {
      //   this.iconNameChildren = "arrow-up";
      // } else {
      //   this.iconNameChildren = "arrow-down";
      // }
      // 清空列表数据
      this.excelListData = [];
      // 继续加载
      this.loading = false;
      // 数据没有全部加载完成
      this.finished = false;
      // 重置化参数
      console.log(
        this.Permissions.findIndex((item) => item == "User.AllReportFile")
      );
      if (
        item == 1 &&
        this.Permissions.findIndex((item) => item == "User.AllReportFile") !==
          -1
      ) {
        this.curNameKey = "/ReportFile";
        // 获取报表文件列表
        this.getExcelListData();
        this.typeTital = 2;
      } else if (item == 1) {
        this.curNameKey = "/ReportFile";
        this.excelListData = []; // 停止加载
        this.loading = false;
        this.typeTital = 2;
        // 数据全部加载完成
        this.finished = true;
      } else {
        // 获取报表文件列表
        this.getExcelListData();
      }
    },
    //   列表加载
    onLoading() {},
    // 获取每一个用户下的报表文件列表数据
    getExcelListData() {
      this.http
        .post(
          "/Base_Manage/Home/GetReportFileInfos?folderPath=" + this.curNameKey
        )
        .then((res) => {
          if (res.Success) {
            this.excelListData = res.Data;
            // 停止加载
            this.loading = false;
            // 数据全部加载完成
            this.finished = true;

            return;
          } else {
            Toast(res.Msg);
            return;
          }
        });
    },
    getFileDirectoryInfo() {
      this.http
        .post(
          "/Base_Manage/Home/GetReportFileDirectoryInfo?folderPath=" +
            this.curNameKey
        )
        .then((res) => {
          if (res.Success) {
            this.treeData = res.Data;
            this.isShowChildren = true;
          } else {
            Toast(res.Msg);
          }
        });
    },
  },
};
</script>

<style lang="less" scoped>
.container {
  padding-top: 50px;
  .height {
    height: 200px;
  }
  .excelBox {
    border: 1px dashed #bdbbbb;
    height: 200px;
    overflow: auto;
    padding: 10px;
    margin: 10px;
  }
  /* 覆盖van-button的默认样式 */
  .van-button {
    padding: 0 10px 0 10px !important;
    position: relative;
  }
  .excel {
    .excelItem {
      // box-shadow: rgba(128, 128, 128, 0.1) 10px 10px 5px 5px;
      margin: 15px;
      // border-radius: 10px;
      border-bottom: 1px solid #e3e1e1;
      padding-bottom: 10px;
      .excelTitle {
      }
      .excelListItem,
      .excelTitle {
        //   margin-bottom: 8px;
        font-size: 14px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 5px;
      }
      .excelListItem.button {
        display: flex;
        justify-content: flex-end;
      }
      .submitDownButton {
        width: 15%;
        padding: 8px 0;
        color: #fff;
        font-size: 10px;
        border: none;
        background-color: #1989fa;
        border-radius: 5px;
        margin-top: 10px;
      }
    }
  }
}
</style>
